<template>
	<div class="homeShare" :style="{'min-height':bodyHeight+'px'}">
		<div class="homeShare-top">
			<img src="../../../../static/img/images/homeShare.png" class="homeShare-topImg" />
			<div class="homeShare-topHead">
				<img src="../../../../static/img/images/people.jpg" />
			</div>
			<div class="homeShare-topText clear2">
				<p>获得匠子额度</p>
				<p>10000匠子</p>
			</div>
			<div class="homeShare-topText clear2">
				<p>2人助力推选&nbsp;&nbsp;</p>
				<p>完成0人</p>
			</div>
		</div>
		<div class="homeShare-block">
			<div class="homeShare-blockTitle">
				助力规则
			</div>
			<div class="homeShare-blockContent">
				<p>1、准共享代言人在实体店消费，获得预送代言金</p>
				<p>2、规定时间内获得两位好友助力推选，成为代言人</p>
				<p>3、助力推选人完成规定助力支付，激活其代言金</p>
				<p>4、助力推选人完成助力后，获得相应奖励</p>
				<p>5、助力奖发放到卡券票根中，在实体店激活使用</p>
				<p>6、助力推选未完成，取消代言资格，代言金收回</p>
			</div>
		</div>
		<div class="homeShare-block">
			<div class="homeShare-blockTitle">
				助力奖励
			</div>
			<div class="homeShare-blockContent">
				<img src="../../../../static/img/images/13.png" />
			</div>
		</div>
		<div class="homeShare-block">
			<div class="homeShare-blockTitle">
				奖品详情
			</div>
			<div class="homeShare-blockContent">
				<img src="../../../../static/img/images/13.png" />
			</div>
		</div>
		<div class="homeShare-bottom clear2">
			<div class="homeShare-bottomL">
				<p class="homeShare-bottomLname">剩余助力时间</p>
				<p class="homeShare-bottomLtime">{{timeList[0]+':'+timeList[1]+':'+timeList[2]}}</p>
			</div>
			<div class="homeShare-bottomR flex1">
				<div class="homeShare-bottomRbutton">
					立即支付1000元助力推选
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		filters: {
			
		},
		data: function() {
			return {
				bodyHeight: 0,
				Time:86400,
				timeList:['00','00','00'],
			}
		},
		mounted() {
			this.bodyHeight = document.body.offsetHeight;
			this.resetTime(this.Time)
		},
		methods: {
			resetTime(time){
				let timer = null;
				let t = time;
				let hour;
			    let min;
			    let sec;
			    let _this=this;
				
				function countDown() {
				    let countDownTime = [];
				    
					hour = Math.floor(t  / 60 / 60 % 24);
			      	min = Math.floor(t / 60 % 60);
			      	sec = Math.floor(t  % 60);
				    if (t < 0) {
				      hour = '00';
				      min = '00';
				      sec = '00';
				      countDownTime.push(hour);
				      countDownTime.push(min);
				      countDownTime.push(sec);
				      _this.timeList=countDownTime;
				      clearInterval(timer);
				      
				    }
				    else {
				      
				      if (hour < 10) {
				        hour = "0" + hour;
				      }
				      if (min < 10) {
				        min = "0" + min;
				      }
				      if (sec < 10) {
				        sec = "0" + sec;
				      }
				      countDownTime.push(hour);
				      countDownTime.push(min);
				      countDownTime.push(sec);
				      t--;
				      _this.timeList=countDownTime;
					}
				}
				timer = setInterval(countDown, 1000);
			},
		}
	}
</script>

<style scoped>
	.homeShare {
		background: #fff;
	}
	
	.homeShare-top {
		width: 100%;
		background: #000;
		padding-bottom: 1rem;
		position: relative;
	}
	
	.homeShare-topImg {
		width: 100%;
		display: block;
	}
	
	.homeShare-topHead {
		width: 6rem;
		height: 6rem;
		border: 4px solid #f7bd40;
		border-radius: 15rem;
		overflow: hidden;
		position: absolute;
		left: 50%;
		transform: translate(-50%, 0);
		top: 9%;
	}
	
	.homeShare-topHead img {
		width: 100%;
		display: block;
		height: 100%;
	}
	
	.homeShare-topText {
		padding-top: 0.8rem;
		width: 17rem;
		margin: 0 auto;
	}
	
	.homeShare-topText p {
		font-size: 1.3rem;
		line-height: 1.5rem;
		color: #f9ecc2;
	}
	
	.homeShare-topText p:nth-child(1) {
		width: 9rem;
		float: left;
	}
	
	.homeShare-topText p:nth-child(2) {
		float: left;
	}
	
	.homeShare-block {
		padding: 1rem 2%;
		width: 96%;
	}
	
	.homeShare-blockTitle {
		padding: 0.3rem 1rem;
		font-size: 1.4rem;
		line-height: 2rem;
		border-radius: 5rem;
		display: inline;
		background: #000;
		color: #f9ecc2;
	}
	
	.homeShare-blockContent {
		padding: 1rem 0.8rem;
	}
	
	.homeShare-blockContent p {
		color: #585858;
		font-size: 1.3rem;
		line-height: 1.8rem;
	}
	
	.homeShare-blockContent img {
		width: 100%;
	}
	
	.homeShare-bottom {
		position: fixed;
		width: 100%;
		bottom: 0;
		left: 0;
		z-index: 1;
		background: #fff;
		display: flex;
	}
	
	.homeShare-bottomL {
		width: 35%;
		padding: 1rem 0;
		text-align: center;
		box-sizing: border-box;
		border-right: 1px solid #e6e6e6;
	}
	
	.homeShare-bottomLname {
		text-align: center;
		font-size: 1.2rem;
		line-height: 1.5rem;
	}
	
	.homeShare-bottomLtime {
		text-align: center;
		font-size: 1.5rem;
		line-height: 1.5rem;
	}
	
	.homeShare-bottomR {
		padding: 1rem 0;
	}
	
	.homeShare-bottomRbutton {
		height: 3rem;
		width: 85%;
		border-radius: 0.4rem;
		background: #000;
		color: #f7bd40;
		font-size: 1.4rem;
		line-height: 3rem;
		text-align: center;
		margin: 0 auto;
	}
</style>